<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞欣热料价格计算</title>
  <!-- 引入 Bootstrap 样式 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义样式 */
    .form-group {
      margin-bottom: 1.5rem;
    }

    .error-message {
      color: red;
      margin-top: 5px;
      /* 间距可以根据需要进行调整 */
    }

    /* 悬浮按钮样式 */
    .floating-button {
      position: fixed;
      bottom: 50%;
      /* 将按钮垂直居中 */
      right: 20px;
      /* 距离屏幕右边的距离 */
      width: 60px;
      /* 设置按钮的宽度 */
      height: 60px;
      /* 设置按钮的高度 */
      border-radius: 50%;
      /* 将按钮形状设置为圆形 */
      background-color: #007bff;
      /* 设置按钮的背景颜色 */
      color: white;
      /* 设置按钮的文字颜色 */
      font-size: 20px;
      /* 设置按钮的文字大小 */
      text-align: center;
      /* 文字水平居中 */
      line-height: 60px;
      /* 文字垂直居中 */
      cursor: pointer;
      /* 鼠标移动到按钮上显示指针 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      /* 添加阴影效果 */
    }

    .floating-button:hover {
      background-color: #0056b3;
      /* 鼠标移动到按钮上时改变背景颜色 */
    }
  </style>
</head>

<body>

  <div class="container mt-5">
    <h1 class="text-center mb-4">绵竹站热料到场价计算</h1>
    <div class="row mb-3">
      <div class="col-md-4 offset-md-8">
        <div class="form-group">
          <label for="asphaltUnitPrice" class="form-label">重交沥青最新单价（元）：<button class="btn btn-secondary"
              onclick="updateAsphaltUnitPrice()">手动修改沥青单价</button></label>
          <input type="text" class="form-control" id="asphaltUnitPrice" value="4200" readonly>

        </div>
      </div>
    </div>
    <form id="priceCalculatorForm">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="material" class="form-label">料型</label>
            <select class="form-select" id="material" name="material">
              <option value="AC-10">AC-10</option>
              <option value="AC-13">AC-13</option>
              <option value="AC-20">AC-20</option>
              <option value="SBSAC-10">SBSAC-10</option>
              <option value="SBSAC-13">SBSAC-13</option>
              <option value="SBSAC-20">SBSAC-20</option>
              <option value="SMA-13">SMA-13</option>
              <option value="AC-13(玄武岩)">AC-13(玄武岩)</option>
              <option value="SBSAC-13(玄武岩)">SBSAC-13(玄武岩)</option>
              <option value="OGFC-10">OGFC-10</option>
              <option value="OGFC-13">OGFC-13</option>
              <option value="OGFC-20">OGFC-20</option>
              <option value="OGFC-10">SBSOGFC-10</option>
              <option value="OGFC-10">SBSOGFC-13</option>
              <option value="OGFC-10">SBSOGFC-20</option>
            </select>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="regenerationDiscount" class="form-label">再生料优惠价</label>
            <select class="form-select" id="regenerationDiscount" name="regenerationDiscount">
              <option value="0">原生料无优惠</option>
              <option value="20">优惠20元</option>
              <option value="30">优惠30元</option>
              <option value="35">优惠35元</option>
              <option value="40">优惠40元</option>
              <option value="45">优惠45元</option>
              <option value="50">优惠50元</option>
            </select>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="vehicleType" class="form-label">车辆类型</label>
            <select class="form-select" id="vehicleType" name="vehicleType">
              <option value="大车">大车</option>
              <option value="小车">小车</option>
              <option value="标吨">标吨</option>
              <option value="自运">自运</option>
            </select>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="oilStoneRatio" class="form-label">油石比</label>
            <div class="input-group">
              <input type="text" class="form-control" id="oilStoneRatio" name="oilStoneRatio"
                placeholder="请输入0-10范围内小数">
              <span class="input-group-text">%</span>
            </div>
            <div id="oilStoneRatioError" class="error-message"></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="distance" class="form-label">运输距离</label>
            <div class="input-group">
              <input type="text" class="form-control" id="distance" name="distance" placeholder="请输入正整数">
              <span class="input-group-text">KM</span>
            </div>
            <div id="distanceError" class="error-message"></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="subsidy" class="form-label">不出城补助</label>
            <div class="input-group">
              <input type="text" class="form-control" id="subsidy" name="subsidy" placeholder="可不填写">
              <span class="input-group-text">元</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="hotMaterialWeight" class="form-label">热料吨位</label>
            <div class="input-group">
              <input type="text" class="form-control" id="hotMaterialWeight" name="hotMaterialWeight"
                placeholder="可不填写">
              <span class="input-group-text">吨</span>
            </div>
            <div id="hotMaterialWeightError" class="error-message"></div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2">
            <div class="form-group">
              <label for="hotMaterialCost" class="form-label">热料单价</label>
              <input type="text" class="form-control" id="hotMaterialCost" readonly>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label for="hotMaterialTotalPrice" class="form-label">热料总价</label>
              <input type="text" class="form-control" id="hotMaterialTotalPrice" readonly>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label for="transportationCost" class="form-label">运输单价</label>
              <input type="text" class="form-control" id="transportationCost" readonly>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label for="transportationTotalPrice" class="form-label">运输总价</label>
              <input type="text" class="form-control" id="transportationTotalPrice" readonly>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label for="totalPrice" class="form-label">到场单价</label>
              <input type="text" class="form-control" id="totalPrice" readonly>
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label for="totalPriceCalculation" class="form-label">到场总价</label>
              <input type="text" class="form-control" id="totalPriceCalculation" readonly>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for="hotMaterialDiscount" class="form-label">热料让价</label>
                <div class="input-group">
                  <input type="text" class="form-control" id="hotMaterialDiscount" name="hotMaterialDiscount"
                    placeholder="可不填写">
                  <span class="input-group-text">元/吨</span>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="transportationDiscount" class="form-label">运输让价</label>
                <div class="input-group">
                  <input type="text" class="form-control" id="transportationDiscount" name="transportationDiscount"
                    placeholder="可不填写">
                  <span class="input-group-text">元/吨</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 计算按钮悬浮在右侧中间 -->
          <div class="floating-button" id="calculateButton">计</div>
        </div>
      </div>
    </form>
  </div>

  <!-- 引入 Bootstrap JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    // 计算热料费用函数
    function calculateHotMaterialCost(material, oilStoneRatio, asphaltUnitPrice) {
      let processingCost; // 加工费

      // 根据料型确定加工费
      switch (material) {
        case 'AC-20':
        case 'AC-13':
          processingCost = 150;
          break;
        case 'AC-10':
        case 'SBSAC-13':
        case 'SBSAC-20':
          processingCost = 155;
          break;
        case 'SBSAC-10':
        case 'OGFC-13':
        case 'OGFC-20':
          processingCost = 160;
          break;
        case 'OGFC-10':
        case 'SBSOGFC-13':
        case 'SBSOGFC-20':
          processingCost = 165;
          break;
        case 'SBSOGFC-10':
          processingCost = 170;
          break;
        case 'AC-13(玄武岩)':
          processingCost = 215;
          break;
        case 'SBSAC-13(玄武岩)':
          processingCost = 220;
          break;
        case 'SMA-13':
          processingCost = 290;
          break;
        default:
          processingCost = 0;
      }

      // 根据料型确定沥青单价
      let adjustedAsphaltUnitPrice;
      switch (material) {
        case 'AC-20':
        case 'AC-13':
        case 'AC-10':
        case 'AC-13(玄武岩)':
        case 'OGFC-20':
        case 'OGFC-13':
        case 'OGFC-10':
          adjustedAsphaltUnitPrice = asphaltUnitPrice;
          break;
        case 'SBSAC-20':
        case 'SBSAC-13':
        case 'SBSAC-10':
        case 'SMA-13':
        case 'SBSAC-13(玄武岩)':
        case 'SBSOGFC-20':
        case 'SBSOGFC-13':
        case 'SBSOGFC-10':
          adjustedAsphaltUnitPrice = asphaltUnitPrice + 650;
          break;
        default:
          adjustedAsphaltUnitPrice = asphaltUnitPrice;
      }

      // 计算热料费用
      let hotMaterialCost = (processingCost + (oilStoneRatio * adjustedAsphaltUnitPrice) / (1 + oilStoneRatio)) * 1.03;

      // 四舍五入保留整数
      hotMaterialCost = Math.round(hotMaterialCost);

      return hotMaterialCost;
    }

    // 在文档加载完成后执行 JavaScript
    document.addEventListener("DOMContentLoaded", function () {
      // 获取表单元素
      const form = document.getElementById("priceCalculatorForm");
      // 监听表单提交事件
      // 监听点击事件
      document.getElementById("calculateButton").addEventListener("click", function (event) {
        // 阻止表单默认提交行为
        event.preventDefault();
        // 检查并计算总价
        checkAndCalculateTotalPrice();
      });
    });

    // 检查并计算总价函数
    function checkAndCalculateTotalPrice() {
      // 获取选项的值
      const materialPrice = parseFloat(document.getElementById("material").value);
      const vehicleType = document.getElementById("vehicleType").value;
      const oilStoneRatio = parseFloat(document.getElementById("oilStoneRatio").value) / 100; // 油石比
      const distanceInput = document.getElementById("distance");
      let distance = parseInt(distanceInput.value);
      const subsidy = parseInt(document.getElementById("subsidy").value) || 0; // 不出城补助
      const hotMaterialWeight = parseFloat(document.getElementById("hotMaterialWeight").value) || 0; // 热料吨位
      let transportationCost;
      // 如果选择了自运，则将运输费用设为0，忽略对运距的验证和计算
      if (vehicleType === "自运") {
        transportationCost = 0;
        distanceInput.value = ""; // 清空运距输入框的值
      } else {
        // 检查运输距离是否小于10，并将其设置为10
        if (distance < 10) {
          distance = 10;
          document.getElementById("distanceError").innerText = "运输距离小于10KM，按照10KM计算运费";
        } else {
          document.getElementById("distanceError").innerText = "";
        }

        // 根据车辆类型和热料吨位计算运输吨位
        let minTransportWeight;
        if (vehicleType === "小车") {
          minTransportWeight = 20;
        } else if (vehicleType === "大车") {
          minTransportWeight = 40;
        } else if (vehicleType === "标吨") {
          minTransportWeight = 0;
        }

        // 如果热料吨位小于设定的吨位
        if (hotMaterialWeight < minTransportWeight && hotMaterialWeight > 0) {
          const weightDifference = minTransportWeight - hotMaterialWeight;
          document.getElementById("hotMaterialWeightError").innerText = `吨位小于运输车辆最少吨位，需要补吨：${weightDifference} 吨，按照${minTransportWeight}吨计算运费`;
          // 根据车辆类型重新计算运输费用
          if (vehicleType === "大车") {
            transportationCost = (((0.001 * distance + 0.45) * distance) + 8) * 1.04;
            // 如果运输距离大于100，则每增加1公里，运输单价增加0.63
            if (distance > 100) {
              transportationCost = (distance * 0.63) * 1.04;
            }
          } else if (vehicleType === "小车") {
            transportationCost = (((0.001 * distance + 0.45) * distance) + 13) * 1.04;
          } else if (vehicleType === "标吨") {
            transportationCost = (((0.001 * distance + 0.5) * distance) + 12) * 1.04;
          }
        } else {
          document.getElementById("hotMaterialWeightError").innerText = "";
          // 计算运输费用
          const adjustedDistance = Math.max(distance, 10); // 运输距离最小为10
          if (vehicleType === "大车") {
            transportationCost = (((0.001 * adjustedDistance + 0.45) * adjustedDistance) + 8) * 1.04;
          } else if (vehicleType === "小车") {
            transportationCost = (((0.001 * adjustedDistance + 0.45) * adjustedDistance) + 13) * 1.04;
          } else if (vehicleType === "标吨") {
            transportationCost = (((0.001 * adjustedDistance + 0.5) * adjustedDistance) + 12) * 1.04;
          }
        }
      }


      // 获取重交沥青单价
      const asphaltUnitPrice = parseInt(document.getElementById("asphaltUnitPrice").value);

      // 获取选择的再生料优惠价值
      const discountValue = parseInt(document.getElementById("regenerationDiscount").value);
      // 获取热料让价
      const hotMaterialDiscount = parseFloat(document.getElementById("hotMaterialDiscount").value) || 0;
      // 获取运输让价
      const transportationDiscount = parseFloat(document.getElementById("transportationDiscount").value) || 0;
      // 计算热料单价
      let hotMaterialCost = calculateHotMaterialCost(document.getElementById("material").value, oilStoneRatio, asphaltUnitPrice);
      //让价则减去对应的值
      hotMaterialCost -= hotMaterialDiscount;
      // 如果选择了再生料优惠价
      if (discountValue > 0) {
        hotMaterialCost -= discountValue;
      }

      // 计算完运输费用后，应用运输让价
      transportationCost -= transportationDiscount;

      // 获取热料总价
      const hotMaterialTotalPrice = hotMaterialCost * hotMaterialWeight;

      // 计算运输总价
      let minTransportWeight;
      if (vehicleType === "小车") {
        minTransportWeight = 20;
      } else if (vehicleType === "大车") {
        minTransportWeight = 40;
      } else if (vehicleType === "标吨") {
        minTransportWeight = 0;
      }
      

      let transportationTotalPrice = 0;
      // 如果有有效的热料重量和运输费用，则计算运输总价
      if (hotMaterialWeight > 0 && transportationCost > 0) {
        const adjustedTransportationWeight = Math.max(minTransportWeight, hotMaterialWeight);
        transportationTotalPrice = parseFloat(transportationCost.toFixed(1)) * adjustedTransportationWeight;
      }
      
      // 将热料费用、运输费用和总价显示在输入框中
      document.getElementById("hotMaterialCost").value = hotMaterialCost;
      document.getElementById("hotMaterialTotalPrice").value = hotMaterialTotalPrice.toFixed(1);
      document.getElementById("transportationCost").value = transportationCost ? transportationCost.toFixed(1) : 0;
      document.getElementById("transportationTotalPrice").value = transportationTotalPrice.toFixed(1);

      // 计算并设置总价
      let totalPrice = hotMaterialCost + parseFloat((transportationCost ? transportationCost.toFixed(1) : 0));
      let totalPriceCalculation = null;

      // 如果热料吨位和补助都有值，则计算到场总价
      if (hotMaterialWeight > 0 && subsidy >= 0) {
        totalPriceCalculation = hotMaterialTotalPrice + transportationTotalPrice + subsidy;

        document.getElementById("totalPrice").value = totalPrice.toFixed(1);
        document.getElementById("totalPriceCalculation").value = totalPriceCalculation ? totalPriceCalculation.toFixed(1) : 0;
      }
    }

    function updateAsphaltUnitPrice() {
      const newPrice = prompt("请输入新的重交沥青最新单价（元）：", document.getElementById("asphaltUnitPrice").value);
      if (newPrice !== null) {
        document.getElementById("asphaltUnitPrice").value = newPrice;
        // 将新的单价值永久修改到本地存储中
        localStorage.setItem("asphaltUnitPrice", newPrice);
      }
    }

    // 在页面加载时检查本地存储中是否有单价值，并设置到输入框中
    document.addEventListener("DOMContentLoaded", function () {
      const storedPrice = localStorage.getItem("asphaltUnitPrice");
      if (storedPrice !== null) {
        document.getElementById("asphaltUnitPrice").value = storedPrice;
      }
    });

  </script>
</body>

</html>